<template>
	<div>
		<!-- <image src="/static/images/video_list_bg.png" class="bg" mode="widthFix" /> -->
		<image :src="getImageURL(bgImg)" class="bg" />

		<view class="wrap">
			<view class="title-bg">
				<image class="img" src="/static/images/video_title_line.png" />
				<view class="title"> {{ navigationTitle }} </view>
				<image class="img" src="/static/images/video_title_line.png" />

				<view class="en-title"> {{ englishTitle }} </view>
			</view>

			<view class="wrap-list">
				<view class="list-content">
					<block v-for="(item, index) in list" :key="index">
						<view class="item" @click="onItem(item)">
							{{ item.title }}
						</view>
					</block>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	import { competitionListData } from "@/utils/api.js";
	export default {
		data() {
			return {
				navigationTitle: "", // 页面标题
				englishTitle: "", // 英文标题
				bgImg: "", //背景图
				type: 0,

				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			if (options.title) {
				this.navigationTitle = options.title;
				this.englishTitle = options.eng;
				uni.setNavigationBarTitle({
					title: options.title,
				});
				this.bgImg = options.bg;
			}
			this.type = options.type || 0;
			this.onRefresh();
		},
		methods: {
			/**
			 * 详情
			 */
			onItem(item) {
				if (this.$filters.isGoToExternalLink(item.isLink, item.url)) {
					uni.navigateTo({
						url: `/pages/video/detail?id=${item.impressionId}`,
					});
				}
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				competitionListData(this.type, this.page).then((res) => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
	}
	.wrap {
		width: 100%;
		padding: 120rpx 15rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title-bg {
			width: 100%;
			overflow: hidden;
			padding-bottom: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 1;

			.img {
				width: 144rpx;
				height: 3rpx;
			}

			.title {
				margin-left: 20rpx;
				margin-right: 20rpx;
				color: white;
				font-size: 50rpx;
				font-weight: bold;
			}

			.en-title {
				position: absolute;
				z-index: 2;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				color: white;
				font-size: 22rpx;
			}
		}

		.wrap-list {
			margin-top: 100rpx;
			width: 100%;
			min-height: calc(100vh - 500rpx);
			// display: flex;
			// align-items: center;
			// justify-content: center;
			overflow: hidden;
			padding: 0 60rpx;
			box-sizing: border-box;
			
			.list-content {
				width: 100%;
				height: fit-content;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				overflow: hidden;
			}

			.item {
				width: 296rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				background-color: #d2d2d2;
				color: #ea5520;
				font-size: 32rpx;
				border: 2rpx solid #ffffff;
				box-sizing: border-box;
				margin-bottom: 40rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>
